<template>
	<view>
		<view class="huabu">
			<!-- 			<button @click="startRecording">开始录制</button>
			<button @click="stopRecording" :disabled="!isRecording">停止录制</button> -->
			<video ref="video" :srcObject="mediaStream" autoplay playsinline></video>
			<view class="item_tags">
				<!-- 				<wd-upload accept="all" :file-list="fileList" action="https://mockapi.eolink.com/zhTuw2P8c29bc981a741931bdd86eb04dc1e8fd64865cb5/upload" @change="handleChange">
					<wd-upload :file-list="fileList" :limit="5" action="https://ftf.jd.com/api/uploadImg" @change="handleChange">
						<wd-button>上传</wd-button>
					</wd-upload>
				</wd-upload> -->
				<wd-upload accept="all" multiple :file-list="fileList" action="http://localhost:4000/index/video_post" @change="handleChange">
					<wd-icon name="picture" size="30px" color="white"></wd-icon>
				</wd-upload>
				<view class="button_border" v-show="istrue == false">
					<button @click="startRecording"></button>
				</view>
				<view class="jieshubutton_border" v-show="istrue == true">
					<button @click="stopRecording"></button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import axios from 'axios';

export default {
	data() {
		return {
			fileList: [],
			mediaStream: null, // 媒体流
			mediaRecorder: null, // 媒体录制器
			chunks: [], // 存储录制的片段
			isRecording: false, // 录制状态
			istrue: false
		};
	},
	methods: {
		handleChange({ fileList }) {
			this.fileList = JSON.parse(fileList[0].response).msg;

			uni.navigateTo({
				url: `/pages/Post_Video/video_upload/video_upload?video=${this.fileList}`
			});
		},
		async startRecording() {
			try {
				if (this.istrue == false) {
					this.istrue = true;
				} else {
					this.istrue = false;
				}
				// 请求访问摄像头
				const stream = await navigator.mediaDevices.getUserMedia({ video: true, audio: true });
				this.mediaStream = stream;
				this.$refs.video.srcObject = stream;

				// 创建录制器并开始录制
				this.mediaRecorder = new MediaRecorder(stream);
				this.mediaRecorder.ondataavailable = (event) => {
					this.chunks.push(event.data);
				};
				this.mediaRecorder.onstop = this.onRecordingStop;
				this.mediaRecorder.start();
				this.isRecording = true;
			} catch (error) {
				console.error('获取摄像头失败:', error);
			}
		},
		stopRecording() {
			this.istrue = false;
			this.mediaRecorder.stop();
			this.mediaStream.getTracks().forEach((track) => track.stop()); // 停止流
			this.isRecording = false;
		},
		onRecordingStop() {
			const blob = new Blob(this.chunks, { type: 'video/webm' });
			this.uploadVideo(blob);
		},
		async uploadVideo(blob) {
			try {
				const formData = new FormData();
				formData.append('video', blob, 'recorded-video.webm');

				// 使用axios上传视频
				let imageurl = await axios.post('http://localhost:4000/index/luzhi_video_post', formData, {
					headers: {
						'Content-Type': 'multipart/form-data'
					}
				});
				uni.navigateTo({
					url: `/pages/Post_Video/video_upload/video_upload?video=${imageurl.data.msg}`
				});
			} catch (error) {
				console.error('上传视频失败:', error);
			}
		}
	},
	beforeDestroy() {
		if (this.mediaStream) {
			this.mediaStream.getTracks().forEach((track) => track.stop());
		}
	}
};
</script>
<style scoped lang="scss">
.huabu {
	width: 100%;
	height: 100vh;
	position: relative;
	background-color: black;
	video {
		width: 100%;
		height: 80%;
	}
	// background-color: red;
	.item_tags {
		width: 100%;
		position: absolute;
		bottom: 50px;
		display: flex;
		justify-content: space-around;
		align-items: center;
		.button_border {
			display: inline-block;
			border-radius: 50%;
			border: 0.3rem solid white;
			button {
				width: 3rem;
				height: 3rem;
				border-radius: 50%;
				background-color: white;
				margin: 0.5rem;
			}
		}
		.jieshubutton_border {
			display: inline-block;
			border-radius: 50%;
			border: 0.3rem solid white;
			button {
				width: 3rem;
				height: 3rem;
				border-radius: 50%;
				background-color: red;
				margin: 0.5rem;
			}
		}
	}
}
</style>
